<style>
	.demo-drawer-footer {
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		border-top: 1px solid #e8e8e8;
		padding: 10px 16px;
		text-align: right;
		background: #fff;
	}
</style>
<template>
	<div class="user-avator-dropdown">
		<Dropdown @on-click="handleClick">
			<Avatar :src="userAvator" />
			<Icon :size="18" type="md-arrow-dropdown"></Icon>
			<DropdownMenu slot="list">
				<DropdownItem name="my">我的信息</DropdownItem>
				<DropdownItem name="zn">平台指南</DropdownItem>
				<DropdownItem name="agree">平台协议</DropdownItem>
				<DropdownItem name="back">意见反馈</DropdownItem>
				<DropdownItem name="safe">账号安全</DropdownItem>
				<DropdownItem name="hide">隐私条款</DropdownItem>
				<!--<DropdownItem name="">当前版本</DropdownItem>-->
				<DropdownItem name="logout">退出登录</DropdownItem>
				<!--<DropdownItem name="">软件编号</DropdownItem>-->
			</DropdownMenu>
		</Dropdown>

		<!--个人信息-->
		<Drawer title="个人信息" v-model="my.show" width="500" :mask-closable="true">
			<Row>
				<Col span="16">
				<Form :model="my.formData" label-position="left" :label-width="100">
					<FormItem label="头像">
						<Upload ref="upload" :data="{'path':'head_img','auth_token':auth_token}" :show-upload-list="false" :on-success="my.upload.handleSuccess" :format="['jpg','jpeg','png']" type="drag" :action="my.uploadUrl" style="display: 
										inline-block;width:100px;">
							<Avatar icon="ios-person" size="large" :src="my.formData.head_img" />
						</Upload>
					</FormItem>
					<FormItem label="姓名">
						<Input v-model="my.formData.realname" />
					</FormItem>
					<FormItem label="手机号">
						<Input v-model="my.formData.username" />
					</FormItem>
					<FormItem label="昵称">
						<Input v-model="my.formData.nickname" />
					</FormItem>
					<FormItem label="性别">
						<RadioGroup v-model="my.formData.sex">
							<Radio label="1" :true-value="1">男</Radio>
							<Radio label="2" :true-value="2">女</Radio>
						</RadioGroup>
					</FormItem>
					<FormItem label="生日">
						<DatePicker :value="my.formData.birthday" type="date" placeholder="Select date" style="width: 200px"></DatePicker>
					</FormItem>

				</Form>
				</Col>
			</Row>
			<div class="demo-drawer-footer">
				<Button style="margin-right: 8px" @click="my.show = false">取消</Button>
				<Button type="primary" @click="saveUser">保存</Button>
			</div>
		</Drawer>
		<!--个人信息-->

		<!--平台指南-->
		<Drawer title="平台指南" v-model="zn.show" width="40%" :mask-closable="true">
			<div v-html="zn.formData.zn"></div>
		</Drawer>
		<!--平台指南-->

		<!--平台协议-->
		<Drawer title="平台协议" v-model="agree.show" width="40%" :mask-closable="true">
			<div v-html="agree.formData.agree"></div>
		</Drawer>
		<!--平台协议-->

		<!--意见反馈-->
		<Drawer title="意见反馈" v-model="back.show" width="500" :mask-closable="true">
			<Row>
				<Col span="16">
				<Form :model="back.formData" label-position="left" :label-width="100">

					<FormItem label="意见反馈">
						<Input type="textarea" :rows="4" v-model="back.formData.back_intro" />
					</FormItem>

				</Form>
				</Col>
			</Row>
			<div class="demo-drawer-footer">
				<Button style="margin-right: 8px" @click="saveBackCannel">取消</Button>
				<Button type="primary" @click="saveBack">保存</Button>
			</div>
		</Drawer>
		<!--意见反馈-->

		<!--账户安全-->
		<Drawer title="账户安全" v-model="safe.show" width="500" :mask-closable="true">
			<div style="background:#eee;padding: 20px">
				<Card :bordered="false">
					<p slot="title">操作</p>
					<ul>
						<li style="list-style-type:none;margin-bottom: 20px;">
							<a @click="doNew($event)" data-type="show_password">修改密码</a>
						</li>
						<li style="list-style-type:none;margin-bottom: 20px;">
							<a @click="doNew($event)" data-type="show_username">修改手机号</a>
						</li>
					</ul>
				</Card>
			</div>
		</Drawer>

		<Drawer title="修改密码" v-model="safe.show_password" width="500" :mask-closable="true">
			<Row>
				<Col span="16">
				<Form :model="safe.e_pw.formData" label-position="left" :label-width="100">

					<FormItem label="旧密码">
						<Input type="password" v-model="safe.e_pw.formData.old_password" />
					</FormItem>

					<FormItem label="新密码">
						<Input type="password" v-model="safe.e_pw.formData.password" />
					</FormItem>

					<FormItem label="确认新密码">
						<Input type="password" v-model="safe.e_pw.formData.re_password" />
					</FormItem>

				</Form>
				</Col>
			</Row>
			<div class="demo-drawer-footer">
				<Button style="margin-right: 8px" @click="updatePasswordCannel">取消</Button>
				<Button type="primary" @click="updatePassword">保存</Button>
			</div>
		</Drawer>

		<Drawer title="修改手机号" v-model="safe.show_username" width="500" :mask-closable="true">
			<Row>
				<Col span="16">
				<Form :model="safe.e_un.formData" label-position="left" :label-width="100">

					<FormItem label="手机号">
						<Input v-model="safe.e_un.formData.username" />
					</FormItem>

					<FormItem label="验证码">
						<Input v-model="safe.e_un.formData.code" style="width: 100px;margin-right: 18px;" />
						<Button type="primary" @click="updateAccountCode" v-if="safe.e_un.sms_count == 60">获取验证码</Button>
						<Button type="primary" :loading="safe.e_un.loading" @click="updateAccountCode" v-if="safe.e_un.sms_count < 60">{{safe.e_un.sms_count}}s</Button>
					</FormItem>

					<FormItem label="密码">
						<Input type="password" v-model="safe.e_un.formData.password" />
					</FormItem>

				</Form>
				</Col>
			</Row>
			<div class="demo-drawer-footer">
				<Button style="margin-right: 8px" @click="updateAccountCannel">取消</Button>
				<Button type="primary" @click="updateAccount">保存</Button>
			</div>
		</Drawer>
		<!--意见反馈-->
		
		<!--隐私条款-->
		<Drawer title="隐私条款" v-model="hide.show" width="40%" :mask-closable="true">
			<div v-html="hide.formData.hide"></div>
		</Drawer>
		<!--隐私条款-->

	</div>
</template>

<script>
	import {
		getUserInfo,
		saveUser,
		getZn,
		getAgree,
		getHide,
		saveBack,
		updatePassword,
		updateAccountCode,
		updateAccount,
	} from '@/api/user'
	import md5 from 'js-md5';
	import { getToken } from '@/libs/util'
	import './user.less'
	import { mapActions } from 'vuex'
	export default {
		name: 'User',
		created() {

			let t = this;
			let baseUrl = process.env.NODE_ENV === 'development' ? t.$config.baseUrl.dev : t.$config.baseUrl.pro
			t.my.uploadUrl = baseUrl+'api/v1.common.cuser.upload/common_image';
		},
		data() {
			let t = this;
			return {
				auth_token: getToken(),
				my: {
					uploadUrl:'',
					show: false,
					formData: {
						head_img: '',
						realname: '',
						username: '',
						nickname: '',
						sex: '',
						birthday: '',
					},
					upload: {
						handleSuccess(res, file) {
							if(res.code == 1) {
								t.my.formData.head_img = res.data.files + '?' + (new Date()).getTime();
							} else {
								t.$Notice.error({
									title: res.msg
								})
							}
						},
					}
				},
				zn: {
					show: false,
					formData: {
						zn: ''
					}
				},
				agree: {
					show: false,
					formData: {
						agree: ''
					}
				},
				back: {
					show: false,
					formData: {
						back_intro: ''
					}
				},
				safe: {
					show: false,
					show_username: false,
					show_password: false,
					e_pw: {
						formData: {
							old_password: '',
							password: '',
							re_password: ''
						}
					},
					e_un: {
						sms_count:60,
						loading:false,
						formData: {
							username: '',
							password: '',
							code: ''
						}
					}

				},
				hide: {
					show: false,
					formData: {
						hide: ''
					}
				},
			}
		},
		props: {
			userAvator: {
				type: String,
				default: ''
			}
		},
		methods: {
			...mapActions([
				'handleLogOut'
			]),
			handleClick(name) {
				switch(name) {
					case 'logout':
						this.handleLogOut().then(() => {
							this.$router.push({
								name: 'login'
							})
							window.location.reload();
						})
						break;
					case 'my':
						this.my.show = true;
						this.getUserInfoExcute();
						break;
					case 'zn':
						this.zn.show = true;
						this.getZnExcute();
						break;
					case 'agree':
						this.agree.show = true;
						this.getAgreeExcute();
						break;
					case 'back':
						this.back.show = true;
						break;
					case 'safe':
						this.safe.show = true;
						break;
					case 'hide':
						this.hide.show = true;
						this.getHideExcute();
						break;	
				}
			},
			getUserInfoExcute() {
				let t = this;
				getUserInfo(t.auth_token).then(res => {
					//console.log(res);
					if(res.data.code == 1) {
						let res_data = res.data.data;
						console.log(res_data);
						t.my.formData = {
							head_img: res_data.car_user.head_img,
							realname: res_data.car_user.realname,
							username: res_data.car_user.username,
							nickname: res_data.car_user.nickname,
							sex: res_data.car_user.sex.toString(),
							birthday: res_data.car_user.birthday,
						}

					} else {
						t.$Notice.error({
							title: res.data.msg
						})
					}

				})
			},
			saveUser() {
				let t = this;
				saveUser(t.my.formData).then(res => {
					if(res.data.code == 1) {

						t.$Notice.success({
							title: res.data.msg
						})
						t.my.show = false;
					} else {
						t.$Notice.error({
							title: res.data.msg
						})
					}

				}, function(error) {

				})
			},
			getZnExcute() {
				let t = this;
				getZn().then(res => {
					console.log(res);
					if(res.data.code == 1) {
						let res_data = res.data.data;
						t.zn.formData = {
							zn: res_data.car_user_zn
						}

					} else {
						t.$Notice.error({
							title: res.data.msg
						})
					}

				})
			},
			getAgreeExcute() {
				let t = this;
				getAgree().then(res => {
					console.log(res);
					if(res.data.code == 1) {
						let res_data = res.data.data;
						t.agree.formData = {
							agree: res_data.car_user_agree
						}

					} else {
						t.$Notice.error({
							title: res.data.msg
						})
					}

				})
			},
			getHideExcute(){
				let t = this;
				getHide().then(res => {
					console.log(res);
					if(res.data.code == 1) {
						let res_data = res.data.data;
						t.hide.formData = {
							hide: res_data.hide
						}

					} else {
						t.$Notice.error({
							title: res.data.msg
						})
					}

				})
			},
			saveBackCannel() {
				let t = this;
				t.back.show = false;
				t.back.formData.back_intro = '';
			},
			saveBack() {
				let t = this;
				saveBack(t.back.formData).then(res => {
					if(res.data.code == 1) {

						t.$Notice.success({
							title: res.data.msg
						})
						t.back.formData.back_intro = '';
						t.back.show = false;
					} else {
						t.$Notice.error({
							title: res.data.msg
						})
					}

				}, function(error) {

				})
			},
			doNew(e) {
				let type = e.target.getAttribute('data-type');
				switch(type) {
					case 'show_password':
						this.safe.show_password = true;
						break

					case 'show_username':
						this.safe.show_username = true;
						break
				}

			},
			updatePasswordCannel() {
				let t = this;
				t.safe.show_password = false;
				t.safe.e_pw.formData = {
					old_password: '',
					password: '',
					re_password: ''
				};
			},
			updatePassword() {
				let t = this;
				updatePassword(t.safe.e_pw.formData).then(res => {
					if(res.data.code == 1) {

						t.$Notice.success({
							title: res.data.msg
						})
						//								t.safe.e_pw.formData={
						//									old_password:'',
						//									password:'',
						//									re_password:''
						//								};
						t.safe.show_password = false;
						t.safe.show = false;
						t.handleLogOut().then(() => {
							t.$router.push({
								name: 'login'
							})
						})
					} else {
						t.$Notice.error({
							title: res.data.msg
						})
					}

				}, function(error) {

				})

			},
			updateAccountCode() {
				let t = this;
				let d = md5.hex(this.getNowFormatDate()+'code')
				let formData = {
					   sign:d,
					   username:this.safe.e_un.formData.username
				}
				
				//console.log(formData);
				updateAccountCode(formData).then(res => {
					if(res.data.code == 1) {
						t.countDown();
                          
						t.$Notice.success({
							title: res.data.msg
						})
					} else {
						t.$Notice.error({
							title: res.data.msg
						})
					}

				}, function(error) {

				})
//				alert(this.getNowFormatDate());
			},
			countDown(){
				let t =this;
				//console.log(t.safe.e_un.sms_count);
				 if (t.safe.e_un.sms_count > 0) {
				 	t.safe.e_un.loading = true;
                	t.safe.e_un.sms_count--;
					setTimeout(function() {
						t.countDown();
					}, 1000)
		         }else{
			        t.safe.e_un.loading = false;
		            t.safe.e_un.sms_count = 60;
		         }
			},
			updateAccount(){
				let t = this;
				updateAccount(t.safe.e_un.formData).then(res => {
					if(res.data.code == 1) {

						t.$Notice.success({
							title: res.data.msg
						})
						//								t.safe.e_pw.formData={
						//									old_password:'',
						//									password:'',
						//									re_password:''
						//								};
						t.safe.show_username = false;
						t.safe.show = false;
						t.handleLogOut().then(() => {
							t.$router.push({
								name: 'login'
							})
						})
					} else {
						t.$Notice.error({
							title: res.data.msg
						})
					}

				}, function(error) {

				})
			},
			updateAccountCannel(){
				let t = this;
				t.safe.show_username = false;
				t.safe.e_un.formData = {
					username: '',
					password: '',
					code: ''
				};
			},
			getNowFormatDate() {
				var date = new Date();
				var seperator1 = "-";
				var seperator2 = ":";
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				var MiDate = date.getMinutes();
				var hoDate = date.getHours();
				if(month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if(strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				if(hoDate >= 0 && hoDate <= 9) {
					hoDate = "0" + hoDate;
				}
				if(MiDate >= 0 && MiDate <= 9) {
					MiDate = "0" + MiDate;
				}
				var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
					" " + hoDate + seperator2 + MiDate;
				return currentdate;
			}

		}
	}
</script>